Pseudo-elements and pseudo-classes in CSS are both used to style elements, but they serve different purposes. Pseudo-elements target specific parts of an element, while pseudo-classes target an element based on its state or position.

Key Differences

1
Pseudo-elements (e.g., ::before, ::after, ::first-letter) style subparts of an element or insert content dynamically.
2
Pseudo-classes (e.g., :hover, :focus, :first-child) style an element based on its state or its relationship with siblings.
3
Pseudo-elements use double colons :: (though single colon : is also supported for legacy browsers), while pseudo-classes use a single colon :.
4
Pseudo-elements do not exist in the DOM; pseudo-classes reflect actual element states.

Example: Pseudo-Element vs Pseudo-Class

In this example, ::first-letter is a pseudo-element targeting part of the paragraph, while :hover is a pseudo-class targeting the link when the user hovers over it.

Best Practices

1
Use pseudo-elements to enhance content without adding extra HTML.
2
Use pseudo-classes to reflect user interaction or structural states.
3
Combine pseudo-classes and pseudo-elements when necessary, e.g., p:first-child::first-letter.
4
Ensure accessibility and test interactions across browsers.

Difficulty: 6/10

Topics: pseudo-elements, pseudo-classes, CSS rendering behavior

Scenario Questions

0-2 years experience

1
How would you add a small asterisk after required form fields using CSS, and why wouldn't you use :required instead?
2
What happens if you try to apply a background color to ::first-line on a div with inline content? Why?
3
You're trying to style the first letter of a paragraph with ::first-letter, but it's not working—what are two common reasons this might fail?

2-5 years experience

1
A tooltip component using ::before for the arrow breaks when the parent has overflow: hidden—how would you debug and fix this without changing the HTML?
2
Your team’s design system uses :hover to show a dropdown, but it doesn’t work on touch devices—how would you adjust the CSS to handle both hover and focus states without duplicating styles?
3
A button with ::after content for an icon is misaligned on mobile—what CSS properties might be causing this, and how would you verify your fix?

5-8 years experience

1
You’re building a reusable card component that uses ::before for decorative borders—how would you ensure it doesn’t break when the card is nested inside a container with transform or filter styles?
2
A legacy component uses pseudo-elements for icons via content: url(...)—how would you migrate this to SVG icons without breaking existing layouts or accessibility?
3
Your CSS-in-JS library doesn’t support pseudo-elements well—how would you design a workaround that maintains performance and SSR compatibility?

8+ years experience

1
Your company’s design system relies heavily on pseudo-elements for UI components across 50+ apps—how would you architect a migration to a token-based, component-driven approach without breaking legacy themes?
2
Pseudo-elements are used in critical accessibility features like screen reader announcements via content: attr(aria-label)—how would you evaluate the long-term maintainability and WCAG compliance of this pattern?
3
You’re designing a CSS architecture for a global platform with 100+ teams—how would you enforce consistent usage of pseudo-elements vs. real DOM elements to avoid performance regressions and accessibility gaps?

Follow-up Questions

❓Can you give an example where using ::before instead of a real DOM element caused a layout issue?
❓How would you debug a ::after content not showing up in a responsive layout?
❓Why can't you style pseudo-elements with JavaScript like regular elements?